<template>
  <view>
    <view class="ding">
      <view class="tx">
        <image style="width: 100%;height: 100%" :src="storedata.logo_url"></image>
      </view>
      <view class="name">{{ storedata.name }}</view>
      <navigator class="ding_tiao" url="/packageD/xuanzemendian/xuanzemendian">
        <view>切换门店</view>
        <image class="dyh" src="/static/img/大于号.png"></image>
      </navigator>
    </view>

    <view class=""></view>

    <view class="jyzk">
      <view class="jyzk_h1">经营状况</view>
      <view class="sjxzq">
        <view class="sjxzq_text" :style="dataindex==1?'color:#074CF3':''" :data-curdate="1" @click="getData">今日</view>
        <view class="sjxzq_text" :style="dataindex==2?'color:#074CF3':''" :data-curdate="2" @click="getData">昨日</view>
        <view class="sjxzq_text" :style="dataindex==3?'color:#074CF3':''" :data-curdate="3" @click="getData">7日</view>
        <view class="sjxzq_text" :style="dataindex==4?'color:#074CF3':''" :data-curdate="4" @click="getData">30日</view>
      </view>

      <view class="jyzk_kk">
        <view class="jyzk_kk2">
          <view>{{ statistics.house_order_num }}</view>
          <view class="jyzk_text1">支付订单数</view>
        </view>
        <view>
          <view>{{ statistics.sum_earnings }}</view>
          <view class="jyzk_text1">实际收入流水（元）</view>
        </view>
      </view>

      <view class="jyzk_kk">
        <view class="jyzk_kk2">
          <view>{{ statistics.store_uv }}</view>
          <view class="jyzk_text1">访客数</view>
        </view>
        <view class="jyzk_kk3">
          <view>{{ statistics.store_uv }}</view>
          <view class="jyzk_text1">访问量</view>
        </view>
      </view>

      <view class="jyzk_kk">
        <view class="jyzk_kk2">
          <view>{{ statistics.sum_house_refund }}</view>
          <view class="jyzk_text1">退款金额（元）</view>
        </view>
        <view class="jyzk_kk4">
          <view>{{ statistics.house_uv }}</view>
          <view class="jyzk_text1">包间数量</view>
        </view>
      </view>

      <view class="jyzk_kk">
        <view class="jyzk_kk2">
          <view>{{ statistics.electricity_duration }}</view>
          <view class="jyzk_text1">包间时长</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
var app = getApp();
import {statisticsFromStoreId} from "@/common/api";
// import {formatDate} from "@/common/util.js"
const util = require("@/common/util.js")
export default {
  data() {
    return {
      dataindex: 1,
      statistics: {},
      start_date: '',
      end_date: '',
      storedata: {}
    };
  }
  /**
   * 生命周期函数--监听页面加载
   */,
  onLoad: function (options) {
    if (app.globalData.loginstatus != 2) {
      uni.navigateTo({
        url: "/packageC/login/login"
      })
    }
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    if (app.globalData.loginstatus == 2) {
      if (app.globalData.store_id) {
        this.storedata = app.storedata
        console.log('this.storedata', this.storedata)
        this.getDate(1)
        this.statisticsFromStoreId()
      } else {
        uni.showModal({
          title: '提示',
          content: '请先选择门店',
          success: function (res) {
            uni.navigateTo({
              url: "/packageD/xuanzemendian/xuanzemendian"
            })
          }
        })
      }
    }
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  },
  methods: {
    statisticsFromStoreId() {
      uni.showLoading({
        title: '加载中...'
      });
      let store_id = 0
      if (app.globalData.store_id) {
        store_id = app.globalData.store_id
      }
      const paramData = {
        checked: 1,
        start_date: this.start_date,
        end_date: this.end_date,
        store_id: store_id
      }
      statisticsFromStoreId(paramData, (res => {
        this.statistics = res.data.data
        uni.hideLoading();
      }))
    },
    getData(option) {
      const curDate = option.currentTarget.dataset.curdate
      this.dataindex = curDate;
      this.getDate(curDate)
      this.statisticsFromStoreId()
    },
    getDate(curDate) {
      if (curDate == 1) {
        const today = util.formatDate(new Date())
        this.setData({
          start_date: today,
          end_date: today
        })
      } else if (curDate == 2) {
        var day1 = new Date()
        day1.setTime(day1.getTime() - 24 * 60 * 60 * 1000)
        var s1 = day1.getFullYear() + "-" + (day1.getMonth() + 1) + "-" + day1.getDate()
        this.setData({
          start_date: s1,
          end_date: s1
        })
      } else if (curDate == 3) {
        var day1 = new Date()
        const today = util.formatDate(day1)
        day1.setTime(day1.getTime() - (7 * 24 * 60 * 60 * 1000))
        var s1 = day1.getFullYear() + "-" + (day1.getMonth() + 1) + "-" + day1.getDate()
        this.setData({
          start_date: s1,
          end_date: today
        })
      } else if (curDate == 4) {
        var day1 = new Date()
        const today = util.formatDate(day1)
        day1.setTime(day1.getTime() - (30 * 24 * 60 * 60 * 1000))
        var s1 = day1.getFullYear() + "-" + (day1.getMonth() + 1) + "-" + day1.getDate()
        this.setData({
          start_date: s1,
          end_date: today
        })
      }
    }
  }
};
</script>
<style>
.ding {
  height: 100rpx;
  display: flex; /* 使用Flexbox布局 */
  justify-content: space-between; /* 子元素之间平均分布在容器中 */
  align-items: center;
  margin: 20rpx 20rpx 20rpx 20rpx;
  color: rgb(209, 164, 41);
}

.tx {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
}

.name {
  margin-left: -250rpx;
}

.dyh {
  width: 40rpx;
  height: 40rpx;
  padding-top: 5rpx;
}

.ding_tiao {
  display: flex;
}

.kong {
  margin: 20rpx 20rpx 20rpx 20rpx;
  background-color: rgb(202, 182, 90);
  height: 180rpx;
  border-radius: 10rpx; /* 设置边框圆角 */
}

.jyzk {
  margin: 20rpx 20rpx 20rpx 20rpx;
  padding: 20rpx 0 0 20rpx;
  background-color: rgb(202, 182, 90);
  height: 60vh;
  border-radius: 10rpx; /* 设置边框圆角 */
}

.jyzk_h1 {
  color: rgb(73, 73, 73);
}

.sjxzq {
  margin-top: 25rpx;
  width: 95%;
  display: flex;
  justify-content: space-between; /* 子元素之间平均分布在容器中 */
  border: 1px solid rgb(247, 0, 0);
  border-radius: 100rpx; /* 设置边框圆角 */
}

.sjxzq_text {
  color: rgb(255, 255, 255);
  margin: 0 8% 0 8%;
  font-size: 31rpx;
}

.jyzk_kk {
  display: flex;
  margin: 20rpx 60rpx 20rpx 40rpx;
  color: rgb(241, 0, 0);
}

.jyzk_kk2 {
  margin-right: 200rpx;
}

.jyzk_kk3 {
  margin-left: 50rpx;
}

.jyzk_kk4 {
  margin-left: -50rpx;
}

.jyzk_text1 {
  color: rgb(114, 110, 110);
  font-size: 24rpx;
  margin-top: 20rpx;
}
</style>
